<!--
* 开源版本请务必保留此注释头信息，若删除捷码开源〔GEMOS〕官方保留所有法律责任追究！
* 本软件受国家版权局知识产权以及国家计算机软件著作权保护（登记号：2018SR503328）
* 不得恶意分享产品源代码、二次转售等，违者必究。
* Copyright (c) 2020 gemframework all rights reserved.
* http://www.gemframework.com
* 版权所有，侵权必究！
-->
<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/links :: common_header(~{::title},~{},~{})">
    <title>主机监控</title>
</head>
<body>
<!-- 正文开始 -->
<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading" style="display: none;">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-lg6">
            <div class="layui-card">
                <div class="layui-card-header">CPU信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <td>值</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>CPU核数</td>
                            <td id="cpu_coreNum"></td>
                        </tr>
                        <tr>
                            <td>用户使用率</td>
                            <td id="cpu_userUsage"></td>
                        </tr>
                        <tr>
                            <td>系统使用率</td>
                            <td id="cpu_sysUsage"></td>
                        </tr>
                        <tr>
                            <td>当前空闲率</td>
                            <td id="cpu_free"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg6">
            <div class="layui-card">
                <div class="layui-card-header">内存信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>内存</th>
                            <th>Swap</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>总内存</td>
                            <td id="memory_total"></td>
                            <td id="swap_total">1909.5MB</td>
                        </tr>
                        <tr>
                            <td>已用内存</td>
                            <td id="memory_used">5.24GB</td>
                            <td id="swap_used">1434.4MB</td>
                        </tr>
                        <tr>
                            <td>剩余内存</td>
                            <td id="memory_free">2.4GB</td>
                            <td id="swap_free">475.1MB</td>
                        </tr>
                        <tr>
                            <td>使用率</td>
                            <td id="memory_usePercent">68.64%</td>
                            <td id="swap_usePercent">75.12%</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">JAVA虚拟机信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <tbody>
                        <tr>
                            <td class="layui-table-header">Jvm名称</td>
                            <td id="jvm_name"></td>
                            <td class="layui-table-header">Java版本</td>
                            <td id="jvm_javaVersion"></td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">启动时间</td>
                            <td id="jvm_startTime"></td>
                            <td class="layui-table-header">运行时长</td>
                            <td id="jvm_runTime"></td>
                        </tr>
                        <tr>
                            <td colspan="1" class="layui-table-header">安装路径</td>
                            <td colspan="3" id="jvm_javaHome"></td>
                        </tr>
                        <tr>
                            <td colspan="1" class="layui-table-header">项目路径</td>
                            <td colspan="3" id="jvm_appHome">/</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <tbody>
                        <tr>
                            <td class="layui-table-header">服务器名称</td>
                            <td id="os_hostName"></td>
                            <td class="layui-table-header">操作系统</td>
                            <td id="os_hostOs"></td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">服务器IP</td>
                            <td id="os_hostAddr"></td>
                            <td class="layui-table-header">系统架构</td>
                            <td id="os_arch"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">磁盘信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                            <tr>
                                <th>盘符路径</th>
                                <th>文件系统</th>
                                <th>盘符类型</th>
                                <th>总大小</th>
                                <th>可用大小</th>
                                <th>已用大小</th>
                                <th>已用百分比</th>
                            </tr>
                        </thead>
                        <tbody id="diskList">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- js部分 -->
<div th:replace="common/scripts :: common"></div>
<div th:replace="common/scripts :: jquery"></div>
<div th:replace="common/scripts :: custom"></div>
<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        //查询CPU
        $.get('sigar/cpuInfo', function (res) {
            if (res.code === 0) {
                $("#cpu_coreNum").html(res.data.coreNum);
                $("#cpu_userUsage").html(res.data.userUsage+"%");
                $("#cpu_sysUsage").html(res.data.sysUsage+"%");
                $("#cpu_free").html(res.data.free+"%");
                if (res.data.userUsage >= 80) {
                    $("#cpu_userUsage").addClass("text-danger");
                    layer.msg("提示：CPU使用率过高!");
                }
                if (res.data.sysUsage >= 80) {
                    $("#cpu_sysUsage").addClass("text-danger");
                    layer.msg("提示：CPU使用率过高!");
                }
            }else {
                layer.msg(res.msg, {icon: 2});
            }
        },'json');

        //查询内存
        $.get('sigar/memory', function (res) {
            if (res.code === 0) {
                $("#memory_total").html(res.data.hostMemory+"G");
                $("#memory_used").html(res.data.hostMemoryUsed+"G");
                $("#memory_free").html(res.data.hostMemoryFree+"G");
                $("#memory_usePercent").html(res.data.hostUsePercent+"%");
                $("#swap_total").html(res.data.swapMemory+"G");
                $("#swap_used").html(res.data.swapMemoryUsed+"G");
                $("#swap_free").html(res.data.swapMemoryFree+"G");
                $("#swap_usePercent").html(res.data.swapUsePercent+"%");
                if (res.data.hostUsePercent >= 80) {
                    $("#memory_usePercent").addClass("text-danger");
                    layer.msg("提示：内存占用率过高!");
                }
            }else {
                layer.msg(res.msg, {icon: 2});
            }
        },'json');

        //查询JVM
        $.get('sigar/sysInfo', function (res) {
            if (res.code === 0) {
                $("#jvm_name").html(res.data.jvmName);
                $("#jvm_javaVersion").html(res.data.javaVersion);
                $("#jvm_javaHome").html(res.data.javaHome);
                $("#jvm_appHome").html(res.data.appHome);
                $("#jvm_startTime").html(res.data.jvmStartTime);
                $("#jvm_runTime").html(res.data.jvmRunTime);
            }else {
                layer.msg(res.msg, {icon: 2});
            }
        },'json');

        //查询OS
        $.get('sigar/osInfo', function (res) {
            if (res.code === 0) {
                $("#os_hostName").html(res.data.hostName);
                $("#os_hostOs").html(res.data.hostOs);
                $("#os_hostAddr").html(res.data.hostAddr);
                $("#os_arch").html(res.data.arch);
            }else {
                layer.msg(res.msg, {icon: 2});
            }
        },'json');

        //查询磁盘列表
        $.get('sigar/diskInfo', function (res) {
            if (res.code === 0) {
                // var diskHtml = "";
                if(res.data.length>0){
                    for(var i=0;i<res.data.length;i++){
                        var diskHtml =
                            "<tr id='disk_"+i+"'>" +
                                "<td>"+res.data[i].dirName+"</td>" +
                                "<td>"+res.data[i].fileType+"</td>" +
                                "<td>"+res.data[i].sysType+"</td>" +
                                "<td>"+res.data[i].total+"G</td>" +
                                "<td>"+res.data[i].avail+"G</td>" +
                                "<td>"+res.data[i].used+"G</td>" +
                                "<td>"+res.data[i].usePercent+"%</td>" +
                            "</tr>";
                        $("#diskList").append(diskHtml);
                        if (res.data[i].usePercent >= 80) {
                            $("#disk_"+i).addClass("text-danger");
                            layer.msg("提示："+res.data[i].dirName+" 磁盘使用率过高!");
                        }
                    }
                }
            }else {
                layer.msg(res.msg, {icon: 2});
            }
        },'json');



    });
</script>
</body>
</html>